import CustomDrawer from '@/components/CustomDrawer/index'
import { Spin } from 'ant-design-vue'
import VuePropTypes from 'ant-design-vue/es/_util/vue-types'
import CustomForm from './CustomForm'
import moment from 'moment'

const CreateFormProps = {
  visible: VuePropTypes.bool.def(false),
  appList: VuePropTypes.any,
  rootMenu: VuePropTypes.any,
  initMenuType: VuePropTypes.string,
  customers: VuePropTypes.array.def([]),
  materials: VuePropTypes.array.def([])
}

const CreateForm = {
  props: CreateFormProps,
  data () {
    return {
      loading: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
      menus: [],
      menuList: [],
      formData: {}
    }
  },
  methods: {
    validate () {
      this.$refs.customForm.validate(() => this.handleOk())
    },
    async handleOk () {
      this.loading = true
      try {
        this.$emit('change', this.formData)
        this.formData = {}
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    handleCancel (refresh = false) {
      this.$emit('close', refresh)
      this.formData = {}
    },
    disabledDate (current) {
      // Can not select days before today and today
      return current && current > moment().add(4, 'month')
    }
  },
  render () {
    const customers = (this.customers || []).filter((item) => item.includes(this.formData.customer || '')).slice(0, 10)
    const materials = (this.materials || []).filter((item) => item.includes(this.formData.material || '')).slice(0, 10)
    const columns = [
      {
        field: 'customer',
        type: 'autoComplete',
        title: '客户名称',
        formItemProps: {
          rules: [
            {
              required: true,
              message: '请输入客户名称'
            }
          ]
        },
        fieldProps: {
          placeholder: '请输入客户名称',
          dataSource: customers
        }
      },
      {
        field: 'material',
        type: 'autoComplete',
        title: '成品物料',
        formItemProps: {
          rules: [
            {
              required: true,
              message: '请输入成品物料'
            }
          ]
        },
        fieldProps: {
          placeholder: '请输入成品物料',
          dataSource: materials
        }
      },
      {
        field: 'date',
        type: 'datePicker',
        title: '日期',
        formItemProps: {
          rules: [
            {
              required: true,
              message: '请选择日期'
            }
          ]
        },
        fieldProps: {
          format: 'YYYY-MM-DD',
          disabledDate: this.disabledDate
        }
      },
      {
        field: 'quantity',
        type: 'inputNumber',
        title: '订单数量',
        formItemProps: {
          rules: [
            {
              required: true,
              message: '请输入订单数量'
            }
          ]
        },
        fieldProps: {
          placeholder: '请输入订单数量'
        }
      }
    ]
    return <CustomDrawer
        title="新增交货"
        visible={this.visible}
        onOk={this.validate}
        onCancel={this.handleCancel}
        confirmLoading={this.loading}
        cancelText="取消"
        okText="确定"
      >
      <Spin spinning={this.loading}>
        <CustomForm
          ref="customForm"
          {...{ props: {
            columns: columns,
          formData: this.formData,
          formProps: {
            labelCol: this.labelCol,
            wrapperCol: this.wrapperCol
          }
        } } }
        />
      </Spin>
    </CustomDrawer>
  }
}

export default CreateForm
